<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<!-- 准备好一个容器，承载整个react -->
	<div id="root"></div>

	<!-- react核心库 -->
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<!-- 支持react操作dom -->
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<!-- 将jsx转为js -->
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
	<!-- 对组件标签属性进行限制 -->
	<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

	<script type="text/babel">
		class Login extends React.Component{
		state = {
			username: '',
			password: ''
		}
		render(){
			// 高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数
			// 	1.若A函数，接收参数是一个函数，那么a函数就是高阶函数
			// 	2.若B函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数

			// 函数的柯里化：通过函数调用继续放回函数的方式，实现多次接收参数最后统一处理的函数编码形式
			return (
				<form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
					用户名：<input type="text" name="username" onChange={event => this.model('username', event)} />	
					密码：<input type="password" name="password" onChange={event => this.model('password', event)} />	
					<button>登录</button>
				</form>
			) 
		}
		model = (stateKey, event) => {
			this.setState({[stateKey]: event.target.value})
		}
		handleSubmit = (event) => {
			event.preventDefault()
			alert(`您输入的用户名是：${this.state.username}、密码是：${this.state.password}`)
		}
	}
	ReactDOM.render(<Login/>, document.getElementById('root'))
	</script>
</body>
 
</html>